<script setup lang="ts">
import { formatNumber } from '@/home/utils/format'
import type { HotRepo } from './hot';
import Platform from '@/common/components/platform-avatar/index.vue';

const props = defineProps<HotRepo>();
</script>

<template>
  <div class="h-52 flex-col justify-between">
    <div class="flex justify-between">
      <div class="flex-y-center gap-4">
        <a :href="props.jump" target="_blank">
          <h3 class="max-w-300 truncate text-16 text-#292929 font-500 leading-28 hover:underline">
            {{ props.name }}
          </h3>
        </a>
        <Platform class="shrink-0" :platform="props.platform" icon-class="size-16" tooltip />
      </div>
      <div class="mb-auto mt-auto flex gap-4 bg-transparent c-hex-575757">
        <div class="i-icons:star size-16"></div>
        <span class="text-12 font-400 leading-16">
          {{ formatNumber(props.starCount) }}
        </span>
      </div>
    </div>
    <p class="max-w-372 truncate text-14 c-hex-575757 leading-22">
      {{ props.description }}
    </p>
  </div>
</template>

<style lang="scss" scoped>
</style>
